<script setup>
import { ref, reactive } from 'vue'
import {selfapp,updselfapp} from  '@/api/basi.js'
const urls = ref('/wework/media/uploadtxt')
let headers = {
	'UserToken': JSON.parse(localStorage.getItem('token')).data,
	// 'UserToken': '1f391c6c-51d9-11ed-8dd2-00163e2292ca',
}
const urldata = ref()
const handleSuccesss = (res, uploadFile) => {
	urldata.value = res.data.url
	// // imgurlRef.value = URL.createObjectURL(uploadFile.raw)
	console.log(res, '上传成功后的urlstring')
}
const form = reactive({
  agent_id: '',
  secret: '',
  name:'',
  customer_qr_ortrait:"",
  customer_qr_portrait:"",
  customer_qr_code:'',
  reply_url:"",
})
const selfappapi=()=>{
  selfapp().then(res=>{
    form.agent_id=res.data.agent_id
    form.secret=res.data.secret
    form.name=res.data.name
    form.customer_qr_ortrait=res.data.customer_qr_ortrait
    form.customer_qr_portrait=res.data.customer_qr_portrait
    form.customer_qr_code=res.data.customer_qr_code
    form.reply_url=res.data.reply_url
  })
}
selfappapi()
const updselfappapi=()=>{
  updselfapp({agent_id:form.agent_id,secret:form.secret}).then(res=>{
    ElMessage({
    message: res.msg,
    type: 'success',
  })
  })
}
const abc =(val)=>{
  const range = document.createRange(); //创建range对象
	range.selectNode(document.getElementById(val)); //获取复制内容的 id 选择器
	const selection = window.getSelection();  //创建 selection对象
	if (selection.rangeCount > 0) selection.removeAllRanges(); //如果页面已经有选取了的话，会自动删除这个选区，没有选区的话，会把这个选取加入选区
	selection.addRange(range); //将range对象添加到selection选区当中，会高亮文本块
	document.execCommand('copy'); //复制选中的文字到剪贴板
	// this.$toast('复制成功')
  ElMessage({
    message: '复制成功',
    type: 'success',
  })
	selection.removeRange(range); // 移除选中的元素
}
defineExpose({
  updselfappapi
})
</script>
<template>
  <div class="cardContent">
    <div class="cardTabTop">
      <!-- <div class="cardTabTop1"></div>
      <div class="cardTabTop2">密钥配置</div> -->
    </div>
    <!-- 正文 -->
    <div class="cardFormStyle">
      <el-form :model="form" label-width="120px" style="margin-top:-5px">
        <el-form-item label="应用ID">
          <el-input v-model="form.agent_id"  />
        </el-form-item>
        <el-form-item label="Secret">
          <el-input v-model="form.secret" />
        </el-form-item>
        <el-form-item label="校验">
          <!-- <el-upload ref="uploadRef" class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :auto-upload="false">
            <template #trigger>
              <el-button type="primary" plain>上传文件</el-button>
            </template>
          </el-upload> -->
          <el-upload
          class="uploader"
          name='file'
          :action="urls"
          :headers="headers"
          :show-file-list="false"
          :on-success="handleSuccesss"
          :before-upload="beforeUpload"
        >
          <!-- <img v-if="urldata" :src="urldata" class="upload-img" /> -->
          <!-- <i v-else class="upload-icon el-icon-plus"></i> -->
          <div v-if="urldata">{{urldata}}</div>
          <div v-else class="upload-icon">
            <el-button type="primary" plain>上传文件</el-button>
              <p v-if="text != ''" style="margin-top: 15px">{{ text }}</p>
          </div>
      </el-upload>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.name" disabled placeholder="xxx应用名称" />
        </el-form-item>
        <el-form-item label="一客一码">
          <el-input id="customer_qr_ortrait" v-model="form.customer_qr_code" disabled placeholder="一客一码" style="width:440px" />
          <el-button style="background-color: #208eff;color: #ffffff;margin-left: 15px;" @click="abc('customer_qr_ortrait')">复制</el-button>
        </el-form-item>
        <el-form-item label="客户画像">
          <el-input id="customer_qr_portrait" v-model="form.customer_qr_portrait"  disabled placeholder="客户画像" style="width:440px" />
          <el-button style="background-color: #208eff;color: #ffffff;margin-left: 15px;" @click="abc('customer_qr_portrait')">复制</el-button>
        </el-form-item>
        <el-form-item label="快捷回复">
          <el-input id="reply_url" v-model="form.reply_url"  disabled placeholder="快捷回复" style="width:440px" />
          <el-button style="background-color: #208eff;color: #ffffff;margin-left: 15px;" @click="abc('reply_url')">复制</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.cardContent {
  background: #FFFFFF;
  margin-top: 20px;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.0400);
  border-radius: 8px;
}

.cardTabTop {
  padding-top: 24px;
}


.el-form-item {
  margin-bottom: 24px;
}

.cardFormStyle {
  width: 640px;
  padding-bottom: 24px;
  margin-left: 70px;
}
</style>